
<template>
  <div>
    <label style="margin: 0 20px">区域监控</label>
    <el-button type="primary" @click="areaExport" size="mini"> 导出 </el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-table
        v-if="flay"
        :data="tableList"
        @row-dblclick="rowClick"
        :header-cell-style="{
          background: '#f2f2f2',
          color: '#333',
          fontSize: '12px',
        }"
        size="mini"
        height="200px"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          fixed
          width="50"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="hbCarNo"
          label="车牌"
          fixed
          align="center"
          width="150"
        />
        <el-table-column
          prop="gpsTime"
          label="时间"
          align="center"
          width="150"
        />
        <el-table-column
          prop="alarmStateInfo"
          label="车辆报警"
          align="center"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column prop="isOnline" label="在线状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.isOnline == 1 ? "在线" : "离线" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ACC状态" align="center" prop="accState">
          <template slot-scope="scope">
            <span>{{ scope.row.accState == 1 ? "ACC开" : "ACC关" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="speed" label="速度" align="center" />
        <el-table-column
          prop="direction"
          label="方向"
          align="center"
          width="100"
        />
        <el-table-column
          prop="simNumber"
          label="SIM卡"
          width="130"
          align="center"
        />
        <el-table-column
          prop="terminalCode"
          label="终端编号"
          width="100"
          align="center"
        />
        <el-table-column prop="oil" label="总油量" />
        <el-table-column prop="totalMile" label="总里程" />
        <el-table-column prop="mileage" label="当日里程" align="center" />
        <el-table-column prop="curMonMile" label="当月里程" align="center" />
        <el-table-column
          prop="lng"
          label="经度"
          width="100"
          align="center"
        />
        <el-table-column
          prop="lat"
          label="纬度"
          width="100"
          align="center"
        />
        <el-table-column
          prop="curAddress"
          label="位置"
          width="500"
          align="center"
          show-overflow-tooltip
        />
      </el-table>

      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>

<script>
// import ExportJsonExcel from "js-export-excel";
import api from "@/api/location/positioning";

export default {
  props: {},
  data() {
    return {
      // 底部列表
      activeName: "first",
      page: {
        pageSize: 10,
        pageNumber: 1,
        getList: this.getrecord,
      },
      tableData: [],
      tableList: [],
      flay: true,
      btnRole: [],
    };
  },
  computed: {
    // listData() {
    //   return this.$store.state.updateareaSearchCar;
    // },
  },
  //监听执行
  watch: {
    listData(val) {
      this.tableData = val;
      this.getrecord(this.page);
      // console.log(val, "val");
    },
  },
  methods: {
    getdata(val) {
      this.tableData = val;
      this.getrecord(this.page);
      // console.log(val, "val");
    },
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getrecord(this.page);
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    getrecord(e) {
      //   console.log(1);
      let arr = [];
      for (
        let i = e.pageSize * (e.pageNumber - 1);
        i < e.pageSize * e.pageNumber;
        i++
      ) {
        if (this.tableData[i]) {
          arr.push(this.tableData[i]);
        }
      }
      this.$set(this, "tableList", arr);
      // //console.log(this.tableList,'wuiehd')
      this.flay = false;
      this.$nextTick(() => {
        this.flay = true;
      });
    },
    rowClick(e) {
      // let arr = this.$store.state.updateareaSearchCar.filter((i, t) => {
      //   return i.carNo == e.carNo;
      // });
      // let arr1 = this.$store.state.updateareaSearchCar.filter((i, t) => {
      //   return i.carNo != e.carNo;
      // });
      // let newArr = arr.concat(arr1);
      // this.$store.commit("clickAreaSearchCar", newArr);
      console.log(21321, "===>e", e);
      // 传值给父级，控制地图的显示层级和中心点
      this.$emit("getAreaTableClicked", e);
    },
    //导出
    exportTable() {
      var option = {};
      option.fileName = "附近车辆监控";
      //  console.log(sheetFilter)
      option.datas = [
        {
          sheetData: this.tableData,
          sheetName: "附近车辆监控",
          // sheetFilter:sheetFilter,
          sheetFilter: [
            //列过滤
            "CarNo",
            "car_code",
            "dvc_type",
            "new_brand",
            "new_model",
            "GpsDateTime",
            "WorkState",
            "Speed",
            "Direction",
            "Mileage",
            "DOil",
            "GoogleLongitude",
            "GoogleLatitude",
            "CurAddress",
          ],
          // sheetHeader:sheetHeader
          sheetHeader: [
            //第一行
            "环保编号",
            "车牌号",
            "车辆类型",
            "车辆品牌",
            "车辆型号",
            "时间",
            "车辆状态",
            "速度",
            "方向",
            "里程",
            "油量",
            "经度",
            "纬度",
            "位置",
          ],
        },
      ];
      if (this.btnRole.length > 0) {
        let isPhone = this.btnRole.map((item, i) => {
          return item.Action == "phone";
        });
        console.log(isPhone);
        if (isPhone) {
          option.datas[0].sheetFilter.push("owner_name", "owner_contact");
          option.datas[0].sheetHeader.push("设备所有人", "联系电话");
        }
      }
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    },
    getAreaExport(val) {
      this.exportParams = val;
    },
    areaExport() {
      let params = this.exportParams;
      // api.areaExport(params).then((res) => {
      //   console.log(1231);
      // });

      this.download(
        "location/gps/realTimeCity/export",
        {
          ...params,
        },
        `realTimeCity_${new Date().getTime()}.xlsx`
      );
    },
  },
  mounted() {
    // console.log(this.height)
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell  {
  white-space: pre-line !important;
}
</style>
